<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>骨医快线</title>
	<link rel="stylesheet" href="../../css/mui.plus.css" />
	<link href="../../css/mui.picker.min.css" rel="stylesheet" />
	<link href="../../css/mui.poppicker.css" rel="stylesheet" />
	<style>
		.mui-input-group:before{
		    position: absolute;
		    left: 0;
		    right: 0;
		    top: 0;
		    height: 1px;
		    background-color: #c8c7cc;
		    content: '';
		    -webkit-transform: scaleY(0.5);
		    transform: scaleY(0.5);
		}
		.pat-list.mui-table-view .mui-media-object {
		    max-width: 80px;
		    height: 70px;
		    line-height: 70px;
		}
		.interval-span ~ .interval-span {
			padding-left: 8px;
		}
		.pat-price {
			position: relative;
			top: 3px;
			color: #30B497;
			font-weight: 600;
			line-height: 25px;
		}
		.mui-table-view {
			position: relative;
		}
		.mui-table-view-cell>.mui-checkbox input[type="checkbox"] {
			position: static;
		}
		.mui-table-view-cell>.mui-checkbox {
			z-index: 99;
			position: absolute;
			right: 10px;
			top: 30px;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">康复宝</h1>
	</header>
	
	<div class="mui-content">
		<div id="banner">
			<img src="../../images/oemall/banner.png" alt="" />
		</div>
		
		<div class="oe-title-line">
			为患者推荐支具
		</div>
		
		<div class="mui-input-group oe-helper">
	        <div class="mui-input-row">
	            <label class="oe-label-pick">选择部位</label>
	            <button id="showPartBtn" type="button" class="mui-btn oe-btn-pick">请选择</button>
	        </div>
		</div>
		
		<div class="oe-divide-block"></div>
		
		<div class="oe-title-line" style="padding-top: 15px;">
			所有产品
		</div>
		
		<ul class="mui-table-view pat-list" id="list-product" style="margin-bottom: 60px;">
		    <div class="oe-emp"><img src="../../images/blank_page/empty-helper@2x.png" alt="" /></div>
		</ul>
	</div>
	
	<script id="tmp-product" type="text/html">
		{{each data as v i}}
			<li class="mui-table-view-cell">
		    	<span class="mui-input-row mui-checkbox mui-right">
					<input name="checkbox" value="Item 1" type="checkbox" class="check" checked="" data-goods_id = "{{v.goods_id}}">
				</span>
		        <a href="javascript:;" data-page = "product-detail.html" class="tap" data-goods_id = "{{v.goods_id}}">
		            <img class="mui-media-object mui-pull-left" src="{{v.goods_thumb_img}}">
		            <div class="mui-media-body">
	                	{{v.goods_name}}
		                <p class="mui-ellipsis">
		                	<span class="interval-span">{{v.goods_major_type}}</span>
		                	<span class="interval-span">{{v.goods_sub_type}}</span>
		                </p>
		                <span class="pat-price" data-price="{{v.goods_shop_price}}">欢迎选购</span>
		            </div>
		        </a>
		    </li>
		{{/each}}	
		<div style="position: fixed;bottom: 0;width: 100%;">
			<button id="shareBtn" type="button" class="mui-btn mui-btn-primary mui-btn-block" data-page = "qrcode.html" style="padding: 10px;margin-bottom: 0;">生成二维码，让患者扫一扫</button>
		</div>
	</script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/mui.picker.min.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    <script src="../../js/lib/template.js"></script>
	<script>
		(function($, a){
			$('#banner').on('tap', 'img', function(){
				$.openWindow({
					url: 'article-list.html',
					waiting: {
						autoShow: false
					}
				})
			})
			
			function toggleByValue(arr, val) {
			  if(arr.length === 0){
			  	arr.push(val);
		    	return arr;
			  }
			  for(var i=0; i<arr.length; i++) {
			    if(arr[i] == val) {
			      arr.splice(i, 1);
			      return arr;
			      break;
			    }
			    if(i === arr.length-1){
			    	arr.push(val);
			    	return arr;
			    }
			  }
			}

			var goods_ids = [],
				html,
				tmpData,
				showPartBtn = document.getElementById("showPartBtn"),
				listProduct = document.getElementById("list-product");

			var picker = new $.PopPicker({layer: 2});
                
            picker.setData([{
				value: '脊柱',
				text: '脊柱',
				children: [{
					value: "颈",
					text: "颈"
					},{
					value: "胸",
					text: "胸"
					},{
					value: "腰",
					text: "腰"
					}]
				},{
					value: '肩/肘',
					text: '肩/肘',
					children: [{
						value: "肩",
						text: "肩"
					},{
						value: "肘",
						text: "肘"
					}]
				},{
					value: '腕/手/指',
					text: '腕/手/指',
					children: [{
						value: "腕",
						text: "腕"
					},{
						value: "手",
						text: "手"
					},{
						value: "指",
						text: "指"
					}]
				},{
					value: '髋',
					text: '髋',
					children: [{
						value: "髋",
						text: "髋"
					}]
				},{
					value: '膝',
					text: '膝',
					children: [{
						value: "膝",
						text: "膝"
					}]
				},{
					value: '踝',
					text: '踝',
					children: [{
						value: "踝",
						text: "踝"
					}]
				},{
					value: '足',
					text: '足',
					children: [{
						value: "足",
						text: "足"
					}]
				}]);
            
            $('.mui-content').on('tap', '#showPartBtn', function(){
            	picker.show(function(items){
            		showPartBtn.innerHTML = items[0].text+' '+items[1].text;
            		if(showPartBtn.innerHTML !== '请选择')showPartBtn.style.color = '#000';
            		a.net.get('c_sp_goods/show_filter_list', {major_type: encodeURI(items[0].value), sub_type: encodeURI(items[1].value), dr_id:a.storage.getUserId()}, function(data){
            			if(data && data.code === '100'){
            				tmpData = data;
            				html = template('tmp-product', tmpData);
            				listProduct.innerHTML = html;
            				for(var i in data.data){
            					goods_ids.push(data.data[i].goods_id)
            				}
            			}else {
            				$.toast('该列表下暂无推荐产品');
            			}
            		});
            	});
            });
            
            $('.mui-content').on('tap', '#shareBtn', function(){
            	var that = this;
            	a.net.post('c_goods_promote_rec/get_goods_promote_url', {dr_id: a.storage.getUserId(), goods_ids: goods_ids.toString()}, function(data){
            		if(data && data.code === '100'){
            			$.openWindow({
            				url: that.dataset.page,
            				waiting: {
            					autoShow: false
            				},
            				extras: {
            					url: data.data,
            					desc:'扫描二维码购买支具'
            				}
            			});
            		}else{
            			$.toast('网络异常，请稍后再试');
            		}
            	})
            });
            
			$('.mui-content').on('tap', '.tap', function(){
				$.openWindow({
					url: this.dataset.page,
					waiting: {
						autoShow: false
					},
					extras: {
						goods_id: this.dataset.goods_id
					}
				})
			});
            
			$('.mui-content').on('change', '.check', function(){
				var that = this;
				goods_ids = toggleByValue(goods_ids, that.dataset.goods_id);
			});
			
			$('.mui-content').on('tap', '.pat-price', function(e){
				
				if(this.innerHTML === '欢迎选购'){
					this.innerHTML = '￥' + this.dataset.price;
				}else {
					this.innerHTML = '欢迎选购'
				}
				e.stopPropagation();
			});
			
		}(mui, app));
	</script>
</body>
</html>